<template>
  <div>
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="流程名称">
        <el-input
          v-model="queryForm.definitionName"
          placeholder="流程名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="list"
      border
      style="width: 100%; min-width: 800px; border-radius: 12px; overflow: hidden; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);"
      :header-cell-style="{ backgroundImage: 'linear-gradient(to right, #f0f9ff, #e5eaff)', color: '#333', fontWeight: 'bold' }"
      :cell-style="{ padding: '12px 8px' }"
      fit
    >
      <el-table-column label="流程名称" align="center" prop="name" />

      <el-table-column label="主表单" align="center">
        <template #default="scope">
          <MainForm :form-json="scope.row.formJson" />
          <h5 v-if="!scope.row.formJson" class="empty-info">暂无信息</h5>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-tag :class="scope.row.suspended ? 'tag-danger' : 'tag-active'">
            {{ scope.row.suspended ? '挂起' : '激活' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" prop="deploymentTime" sortable />

      <el-table-column label="操作" align="center" width="400">
        <template #default="scope">
          <div class="button-group">
            <el-button
              link
              type="primary"
              class="btn-design"
              icon="el-icon-edit"
              @click="handleDesign(scope.row.deploymentId)"
            >
              设计
            </el-button>
            <el-button
              link
              type="primary"
              :class="scope.row.suspended ? 'btn-activate' : 'btn-suspend'"
              :icon="scope.row.suspended ? 'VideoPlay' : 'VideoPause'"
              @click="updateState(scope.row.deploymentId)"
            >
              {{ scope.row.suspended ? '激活' : '挂起' }}
            </el-button>
            <el-button
              link
              type="primary"
              class="btn-view"
              icon="Pointer"
              @click="handleDetails(scope.row.deploymentId)"
            >
              查看
            </el-button>
            <el-button
              link
              type="danger"
              class="btn-delete"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.deploymentId)"
            >
              删除
            </el-button>
            
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" v-model:page-size="queryForm.pageSize" v-model:current-page="queryForm.pageNo" :total="total" @current-change="getList" />

    <!-- 部署bpmn弹出框 -->
    <DeployBpmn ref="deployBpmn" @ok="getList" />

    <!-- 流程详情 -->
    <BpmnDetails ref="bpmnDetails" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import baseService from "@/service/baseService";
// @ts-ignore
import DeployBpmn from "./model/DeployBpmn.vue";
// @ts-ignore
import BpmnDetails from "./model/BpmnDetails.vue";
// @ts-ignore
import MainForm from "./model/MainForm.vue";

// 查询参数
const queryForm = reactive({
  definitionName: "",
  definitionKey: "",
  pageNo: 1,
  pageSize: 10
});
// 列表内容数量
const total = ref(0);
// 列表是否加载
const loading = ref(true);
// 列表返回值
const list = ref<any[]>([]);
// 部署bpmn
const deployBpmn = ref();
//流程详情
const bpmnDetails = ref();

/**
 * 查询列表
 */
const getList = () => {
  loading.value = true;
  baseService
    .get("/processDefinition/list", queryForm)
    .then((res) => {
      loading.value = false;
      if (res.code === 200) {
        console.log("返回的数据"+JSON.stringify(res.rows));
        list.value = res.rows;
        total.value = res.total;
      } else {
        list.value = [];
      }
    })
    .catch(() => {
      loading.value = false;
    });
}

/**
 * 输入框侦测，自动查询
 */
watch(() => queryForm.definitionName, (newValue) => {
  // 如果输入框内容为空，重置查询
  if (newValue === "") {
    queryForm.pageNo = 1;
    getList();
  } else {
    // 如果有内容，则立即触发查询
    getList();
  }
});

/**
 * 详情
 * @param deploymentId 流程部署id
 */
function handleDetails(deploymentId: string) {
  bpmnDetails.value.open(deploymentId);
}

/**
 * 新增
 */
function handleAdd() {
  deployBpmn.value.open(undefined);
}

/**
 * 设计
 * @param deploymentId 流程部署id
 */
function handleDesign(deploymentId: string) {
  deployBpmn.value.open(deploymentId);
}

/**
 * 更新流程定义状态 激活或者挂起
 * @param deploymentId 流程部署id
 */
function updateState(deploymentId: any) {
  baseService.get(`/processDefinition/updateState?deploymentId=${deploymentId}`).then((res) => {
    if (res.code === 200) {
      ElMessage.success(res.msg);
      getList();
    } else {
      ElMessage.error(res.msg);
    }
  });
}

/**
 * 删除按钮操作
 * @param deploymentId 流程部署id
 */
function handleDelete(deploymentId: any) {
  ElMessageBox.confirm("确认要删除当前项吗? 流程实例启动的也将被删除,谨慎删除", "提示").then(() => {
    baseService.delete(`/processDefinition/delete`, deploymentId).then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.msg);
        getList();
      } else {
        ElMessage.error(res.msg);
      }
    });
  });
}

/**
 * 重置查询条件
 */
function resetFilters() {
  queryForm.definitionName = "";
  queryForm.pageNo = 1; // 重置页码
  getList();
}

getList();
</script>


<style scoped>
/* 表格整体样式 */
.el-table {
  background-color: #fff;
  font-size: 14px;
  transition: all 0.3s;
}

/* 表头样式 */
.el-table__header-wrapper th {
  background-image: linear-gradient(to right, #f0f9ff, #e5eaff);
  color: #333;
  font-weight: bold;
  border-bottom: 1px solid #ebeef5;
}

/* 行悬停效果 */
.el-table .el-table__body-wrapper tr:hover {
  background-color: #f0f9ff;
  transition: background-color 0.2s ease;
}

/* 状态标签样式 */
.tag-danger {
  background-color: #ff6b6b !important;
  color: #fff !important;
  border-radius: 4px;
  font-weight: 500;
}
.tag-active {
  background-color: #4caf50 !important;
  color: #fff !important;
  border-radius: 4px;
  font-weight: 500;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.button-group .el-button {
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 500;
  min-width: 60px;
  transition: all 0.2s;
}
.btn-design {
  background-color: #3b82f6;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-activate {
  background-color: #4caf50;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-suspend {
  background-color: #ff9800;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-view {
  background-color: #5c6bc0;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-delete {
  background-color: #e57373;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.button-group .el-button:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* 无信息提示样式 */
.empty-info {
  color: #999;
  font-size: 14px;
  text-align: center;
  margin: 0;
  font-weight: 500;
}
</style>
